<template>
  <layout :footerVisible="true">
    <u-navbar title="抬头管理" :background="{ 'background-image': 'linear-gradient(to right, #434AD8, #8E77F5)' }" :border-bottom="false" backIconColor="#fff" titleColor="#fff"></u-navbar>
    
    <view class="list" v-if="listData.length">
      <view
        :class="{ 'list-content-item': true, 'shadow': index === defaultTitleIdx }"
        v-for="(item, index) in listData" :key="index"
        @click="clickSelect(index)">
        <view class="list-content-item-title h-box justify-between">
          <view class="uni-bold">普通发票抬头-{{ item.type === 'company' ? '单位' : '个人' }}</view>
          <u-radio-group v-model="defaultTitleIdx" active-color="#FF5673">
            <u-radio :name="index" icon-size="34" label-size="28">设为默认</u-radio>
          </u-radio-group>
        </view>
        <u-line color="#EAEAEA" margin="20rpx 0"></u-line>
        <view class="list-content-item-info h-box justify-between">
          <view class="flex-extend">
            <view >{{ item.title || '-' }}</view>
            <view v-if="item.type === 'company'" class="gray" style="font-size: 20rpx;">{{ item.number || '-' }}</view>
          </view>
          <image class="mg-l-sm" style="width: 32rpx;height: 32rpx;" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/main_ic_bianji@2x.png" @click.stop="clickEdit(1, index)"></image>
        </view>
      </view>
      
      <view class="h-fill">
        <uni-load-more :status="page.status"></uni-load-more>
      </view>
    </view>
    
    <view v-else style="margin-top: 40%;">
      <u-empty></u-empty>
    </view>
    
    <template v-slot:footer="">
      <view class="footer h-box justify-around v-fill">
        <view @click="clickEdit(0)">添加发票抬头</view>
      </view>
    </template>
  </layout>
</template>

<script>
  const db = uniCloud.database()
  const dbCmd = db.command
  
  export default {
    name: 'invoice-title-list',
    data() {
      return {
        listData: [],
        page: {
          pageNum: 0,
          pageSize: 20,
          total: 0,
          status: 'more'
        },
        
        defaultTitleIdx: -1
      }
    },
    onShow() {
      if (!uni.getStorageSync('isUpdate')) return
      uni.setStorageSync('isUpdate', false)
      this.getOpenerEventChannel().emit('isUpdate', true);
      this.page.pageNum = 0
      this.page.total = 0
      this.listData = []
      this.getData()
    },
    onReady() {
      this.getData()
    },
    onReachBottom() {
      if (this.page.total === this.listData.length) return
    	this.getData()
    },
    methods: {
      clickEdit(type, index) {
        if (type) { // 编辑
          uni.navigateTo({
            url: `/pagesUser/platform/invoice-title-edit?invoiceTitleId=${ this.listData[index]?._id || '' }`
          })
        } else { // 新增
          uni.navigateTo({
            url: `/pagesUser/platform/invoice-title-edit`
          })
        }
      },
      
      async clickSelect(index) {
        this.defaultTitleIdx = index
        
        uni.showLoading({ mask: true })
        
        try{
          await db.collection('t3ds-invoice-title')
          .where({ userId: this.$store.state.userInfo._id, isDefault: true })
          .update({
            isDefault: false,
            updateBy: this.$store.state.userInfo.nickname,
            updateTime: Date.now()
          })
          
          await db.collection('t3ds-invoice-title')
          .doc(this.listData[index]._id)
          .update({
            isDefault: true,
            updateBy: this.$store.state.userInfo.nickname,
            updateTime: Date.now()
          })
        }catch(e){
          uni.hideLoading()
        }
        
        uni.hideLoading()
      },
      
      async getData() {
        try{
          this.page.status = 'loading'
          this.page.pageNum++
          let res = await this.$dbHelper.getPage('t3ds-invoice-title', {
            where: { userId: this.$store.state.userInfo._id },
            pageNum: this.page.pageNum,
            pageSize: this.page.pageSize
          })
          if (res.list.length) {
            let cache = this.listData.concat(res.list)
            let index = cache.findIndex(item => item.isDefault)
            if (index === -1) {
              this.defaultTitleIdx = -1
            } else {
              this.defaultTitleIdx = 0
              let [delEle] = cache.splice(index, 1)
              cache.unshift(delEle)
            }
            this.listData = cache
          }
          this.page.total = res.total
          this.page.status = this.listData.length < this.page.total ? 'more' : 'noMore'
        }catch(e){
          this.page.status = 'more'
          this.page.pageNum--
          uni.hideLoading()
        }
        
        uni.hideLoading()
      }
    }
  }
</script>

<style>
  page {
    background-color: #F5F5F5;
  }
</style>

<style scoped lang="scss">
  .gray {
    color: #A3A3A3;
  }
  
  .gray-bgc {
    background-color: #EFF1F7;
  }
  
  .list {
    margin: 0 30rpx;
    
    .list-content-item{
      margin-top: 30rpx;
      padding: 30rpx;
      background-color: white;
      border-radius: 20rpx;
      
      /deep/ .u-radio {
        .u-radio__label {
          color: #A3A3A3;
          margin-right: 0;
        }
      }
    }
    
    .shadow {
      // outline: 1px solid #FF5673;
      box-shadow:
        2px 0 0 0 #FF5673 inset,
        0 2px 0 0 #FF5673 inset,
        -2px 0 0 0 #FF5673 inset,
        0 -2px 0 0 #FF5673 inset
    }
    
    .list-content-item:last-child {
      margin-bottom: 30rpx;
    }
  }
  
  .footer {
    box-shadow: 0px -2px 30px 0px rgba(0, 0, 0, 0.1);
    
    view {
      width: 690rpx;
      height: 88rpx;
      line-height: 88rpx;
      background: #FF5673;
      border-radius: 50rpx;
      color: white;
      text-align: center;
    }
  }
</style>
